<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>各类选择器</title>
    <style>
        *{
            font-size:200px;
        }/*全中选择器*/
        .a{
            color:royalblue;
            font-size:20px
        }/*类选择器*/
        #b{
            color:yellow;
            font-size:20px;
        }/*id选择器*/
        div ul{
            font-size:20px;
            color:olivedrab;
        }/*后代选择器*/
        div>h1{
            font-size:35px;
        }/*子选择器*/
        p+p{
            color:teal;
        }/*相邻兄弟选择器*/
        p~ol{
            color:salmon;
        }/*通用兄弟选择器*/
        h1{
            color:violet;
        }/*标签选择器*/
        li:first-child{
            color:lavenderblush;
        }/*选择作为其父的首个子元素的每个 <p> 元素*/
        li:last-child{
            color:antiquewhite;
        }/*选择作为其父的最后一个子元素的每个 <p> 元素*/
        input:first-of-type{
            color:peru;
        }/*选择作为其父的首个 <p> 元素的每个 <p> 元素*/
        input:focus{
            font-weight:600;
        }/*选择获得焦点的 <input> 元素*/
        a:link{
            color:yellow;
        }/*选择所有未被访问的链接*/
        input:in-renge{
            border:15px springgreen;
        }/*选择具有指定范围内的值的 <input> 元素*/
        a[target]{
            background-color:hotpink;
        }/*属性选择器*/
        [lang|=en]{
            background:burlywood;
        }/*选择带有以 "en" 开头的 lang 属性的所有元素*/
        p:first-child{
            color:green;
        }/*选择作为其父的首个子元素的每个 <p> 元素*/
        p{
            font-size:25px;
        }
        div,
        ul{
            font-family:\5b8b\4f53;
        }  /*并集选择器*/
        p::first-letter{
            font-weight:500;
            color:rebeccapurple
        }/*选择每个 <p> 元素的首字母*/
        p::first-line {
                     color: grey
         }/*选择每个 <p> 元素的首行*/
        p::before{
            content:"武";
        }/*在每个 <p> 元素之后插入内容*/
        p:before {
            content: "侠：";
        }/*在每个 <p> 元素之前插入内容*/
        :not(p){
            font-size:20px;
        }/*选择每个非 <p> 元素的元素*/
        h3:nth-child(3){
            font-size:15px;
        }/*选择作为其父的第三个子元素的每个 <p> 元素*/
        h3:nth-last-of-type(2) {
            background:darkorchid;
        }/*选择作为父的第二个<p>元素的每个<p>元素，从最后一个子元素计数*/
        h3:nth-of-type(3) {
            background:midnightblue;
        }/*选择作为其父的第三个 <p> 元素的每个 <p> 元素*/
    </style>
</head>
<body>
<div>
    <ul>
        <li class="a">华山派</li>
        <li class="a">嵩山派</li>
        <li id="b">泰山派</li>
        <li>衡山派</li>
    </ul>
</div>
<div>
    <h1>笑傲江湖</h1>
</div>
<h2>令狐冲</h2>
<p>
<ol>
    <li>天下风云出我辈</li>
    <li>一入江湖岁月催</li>
    <li>宏图霸业谈笑中</li>
    <li>不胜人间一场醉</li>

</ol>
</p>
<p>独孤九剑</p>
<p>华山剑法</p>
<p>辟邪剑谱</p>
<p>葵花宝典</p>
<p>
    道可道，非常道。名可名，非常名。<br>
    无名天地之始﹔有名万物之母。<br>
    故常无，欲以观其妙﹔常有，欲以观其徼。<br>
    此两者，同出而异名，同谓之玄。<br>
</p>
<ol>
    <li>四够一</li>
    <li>欧一吸</li>
    <li>旧的麻袋</li>
</ol>

<h1>沧海一声啸</h1>
<h2>滔滔两岸潮</h2>
<h3> 浮沉随浪只记今朝</h3>
<h3>苍天笑</h3>
<h3>纷纷世上潮</h3>

<ul>
    <li>谁负谁胜出天知晓</li>
    <li>江山笑 烟雨遥</li>
    <li>涛浪淘尽红尘俗世几多娇</li>
</ul>
<p>
    ccc清风笑 竟惹寂寥
</p>
<p>
   www 豪情还剩了一襟晚照
</p>

<p><input type="reset"/> <input type="submit"/></p>
<p>
    编号<input type="number" min="1" max="60" /></p>

<a href="#">江湖</a>
<a href="//www.baidu.com/" target="_self">百度</a>

</body>
</html>